<template>
  <a-spin :spinning="confirmLoading">
 
      <a-form-model ref="formData2" style="max-width: 800px; margin: 30px auto 0;">
        <a-alert
          :closable="true"
          message="请认真填写水表信息，红框必填！"
          style="margin-bottom: 24px;"     />  

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="片区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="areaId">
              <j-dict-select-tag type="list" class="inpRequire" v-model="formData2.areaId" dictCode="mws_t_base_areas,name,id" placeholder="请选择片区" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="code">
              <a-input v-model="formData2.code" class="inpRequire"  disabled ></a-input>             
            </a-form-model-item>
          </a-col>          
               
          <a-col :span="12">
            <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waterUserStatus">
              <j-dict-select-tag type="list" class="inpRequire" v-model="formData2.waterUserStatus" dictCode="water_user_status" placeholder="请选择状态" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="启用时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="enabledTime">
              <j-date placeholder="请选择启用时间" v-model="formData2.enabledTime"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="分组编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="groupname">
              <a-input v-model="formData2.groupname" placeholder="请输入分组编号"  ></a-input>
            </a-form-model-item>
          </a-col>      
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="安装地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <a-input v-model="formData2.address" class="inpRequire" placeholder="请输入安装地址"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="水表安装日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="firstInstallTime">
              <j-date placeholder="请选择水表安装日期" class="inpRequire" v-model="formData2.firstInstallTime"  style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="是否远传表" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isRemote">
              <j-dict-select-tag type="list" class="inpRequire" v-model="formData2.isRemote" dictCode="yn" placeholder="请选择是否远传表" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="水表用途" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waterUseType">
              <j-dict-select-tag type="list" class="inpRequire" v-model="formData2.waterUseType" dictCode="water_use_type" placeholder="请选择水表用途" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="加压级别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waterPressurLevel">
              <j-dict-select-tag type="list" v-model="formData2.waterPressurLevel" dictCode="water_pressur_level" placeholder="请选择加压级别" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="水表井号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="manholeId">
              <a-input v-model="formData2.manholeId"  placeholder="请输入水表井号"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="口径" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="waterCaliberSize">
              <j-dict-select-tag type="list"  v-model="formData2.waterCaliberSize" dictCode="water_caliber_size" placeholder="请选择口径" />
            </a-form-model-item>
          </a-col>
          
        </a-row>
        <a-form-item :wrapperCol="{span: 19, offset: 10}">
          <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
          <a-button style="margin-left: 8px" type="primary" @click="nextStep">下一步</a-button>
        </a-form-item>
      </a-form-model>
  </a-spin>
</template>


<script>
  import { httpAction, getAction } from '@/api/manage'
  export default {
    name: "ArcCusStep2",
    props: ["formData2"],
    data () {
      return {
        confirmLoading: false,
        codeStatus: true,
        disabled: {
          type: Boolean,
          default: false,
          required: false
        },

        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        url: {          
          addCusNo: "/arc/arcCustomers/addCusNo",        
        }
      }
    },
    created () {
      this.addInit();
    },
    methods: {
      nextStep () {
        if(this.verifyForm()){
          console.log("formData2:",this.formData2);
          this.$emit('nextStep')
        }; 
      }, 
      prevStep () {
        this.$emit('prevStep')
      },
      verifyForm(){
        let vrs=true;
        if(! this.formData2.areaId){
          this.$message.warning('请填写片区');
          vrs=false;
        }
        if(! this.formData2.waterUserStatus){
          this.$message.warning('请选择状态');
          vrs=false;
        }
        if(! this.formData2.address){
          this.$message.warning('请填写安装地址');
          vrs=false;
        }
        if(! this.formData2.firstInstallTime){
          this.$message.warning('请填写安装日期');
          vrs=false;
        }
        if(! this.formData2.isRemote){
          this.$message.warning('请选择是否远程水表');
          vrs=false;
        }
        if(! this.formData2.waterUseType){
          this.$message.warning('请选择水表用途');
          vrs=false;
        }
        return vrs; 
      }, 
      addInit(){
        const that = this
        httpAction(this.url.addCusNo,null,'get').then((res)=>{
          if(res.success){         
            that.formData2.code=res.result; 
            that.codeStatus=true;
          }else{
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      }    
    }
  }
</script>

<style scoped>

  .inpRequire {
    border: 1px solid #974c4c;
  }

</style>